<template>
    <div>
        <van-tabs v-model:active="active">
            <van-tab title="全部">
                 <van-cell title="2024-06-18 15:04:26" value="29分30秒 待付款" />
                <van-card  price="20.10" desc="华为Mate60Pro" title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                    <template #footer>
                        <van-button size="mini">取消订单</van-button>
                        <van-button size="mini">立即支付</van-button>
                    </template>
                </van-card>
                 <van-cell title="2024-06-18 15:04:26"  />
                <van-card  price="20.10" desc="华为Mate60Pro" title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                    <template #footer>
                        <van-button size="mini">取消订单</van-button>
                        <van-button size="mini">立即支付</van-button>
                    </template>
                </van-card>
                 <van-cell title="2024-06-18 15:04:26"  />
                <van-card  price="20.10" desc="华为Mate60Pro" title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                    <template #footer>
                        <van-button size="mini">取消订单</van-button>
                        <van-button size="mini">立即支付</van-button>
                    </template>
                </van-card>

            </van-tab>
            <van-tab title="待付款">
                 <van-cell title="2024-06-18 15:04:26" value="29分30秒 待付款" />
                <van-card  price="20.10" desc="华为Mate60Pro" title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                    <template #footer>
                        <van-button size="mini">取消订单</van-button>
                        <van-button size="mini">立即支付</van-button>
                    </template>
                </van-card>
            </van-tab>
            <van-tab title="待发货">
                 <van-cell title="2024-06-18 15:04:26" value=" 待发货款" />
                <van-card  price="20.10" desc="华为Mate60Pro" title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                    <template #footer>
                        <van-button size="mini">取消订单</van-button>
                        <van-button size="mini">立即支付</van-button>
                    </template>
                </van-card>
                 <van-cell title="2024-06-18 15:04:26" value=" 待发货" />
                <van-card  price="20.10" desc="华为Mate60Pro" title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                    <template #footer>
                        <van-button size="mini">取消订单</van-button>
                        <van-button size="mini">立即支付</van-button>
                    </template>
                </van-card>
            </van-tab>
            <van-tab title="待收货">
                 <van-cell title="2024-06-18 15:04:26" value="待收货" />
                <van-card  price="20.10" desc="华为Mate60Pro" title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                    <template #footer>
                        <van-button size="mini">取消订单</van-button>
                        <van-button size="mini">立即支付</van-button>
                    </template>
                </van-card>
            </van-tab>
            <van-tab title="已完成"></van-tab>
            <van-tab title="已取消"></van-tab>
        </van-tabs>

    </div>
</template>

<script setup>
import { ref } from 'vue';

</script>

<style lang="scss" scoped></style>